<script setup lang="ts">
import { useTemplateRef, ref, inject } from 'vue'
import { gsap } from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'
import VideoWrap from '../../components/video-wrap.vue'
import { navBarHeightKey } from '@/views/product/reno14-pro/symbol-key.ts'
import { leftTextRefKey, video1ContainerKey } from './symbol-key.ts'
import { useGsapContext } from '@/hooks'
import { useScrollGroup } from '@/hooks/reno14-pro.ts'

const { scrollGroup } = useScrollGroup()
const navBarHeight = inject(navBarHeightKey)
const leftTextRef = inject(leftTextRefKey)
const video1ContainerRef = inject(video1ContainerKey)

const videoWrapRef = useTemplateRef<HTMLDivElement | null>('videoWrapRef')
const item1VideoFlag = ref<1 | 2>(1)
const video1_1 = useTemplateRef<HTMLVideoElement | null>('video1_1')
const video1_2 = useTemplateRef<HTMLVideoElement | null>('video1_2')
const video1Desc = useTemplateRef<HTMLDivElement | null>('video1Desc')

useGsapContext(() => {
  if (!videoWrapRef.value) {
    return
  }

  ScrollTrigger.create({
    trigger: videoWrapRef.value,
    endTrigger: leftTextRef!.value,
    start: () => {
      const _start = (navBarHeight?.value ?? 48) / 2
      return `center-=${_start} center`
    },
    end: 'center center',
    pin: true,
    pinSpacing: true,
    invalidateOnRefresh: true,
    ...scrollGroup,
  })

  ScrollTrigger.create({
    trigger: video1ContainerRef!.value,
    start: 'top center',
    end: 'center center',
    onToggle: async (self) => {
      item1VideoFlag.value = 1
      const video = video1_1.value

      if (self.isActive) {
        if (video) {
          await video.play().catch()
          gsap.to(video1Desc.value, {
            yPercent: 0,
          })
        }
      } else {
        if (video) {
          video.pause()
          video.currentTime = 0
        }
      }
    },
    invalidateOnRefresh: true,
    ...scrollGroup,
  })
  ScrollTrigger.create({
    trigger: video1ContainerRef!.value,
    start: 'center center',
    end: 'bottom center',
    onToggle: async (self) => {
      item1VideoFlag.value = 2

      const video = video1_2.value
      if (self.isActive) {
        if (video) {
          await video.play().catch()
          gsap.to(video1Desc.value, {
            yPercent: -50,
          })
        }
      } else {
        if (video) {
          video.pause()
          video.currentTime = 0
        }
      }
    },
    invalidateOnRefresh: true,
    ...scrollGroup,
  })
})

const video1Playing = ref(false)
</script>

<template>
  <div ref="videoWrapRef">
    <VideoWrap class="aspect-[180/239]" :playing="video1Playing">
      <video
        ref="video1_1"
        class="w-full h-full object-cover"
        :class="{ hidden: item1VideoFlag !== 1 }"
        muted
        @play="video1Playing = true"
        @ended="video1Playing = false"
        src="@/views/product/reno14-pro/image/4/videos-photogtaphy-c1-1-1-pc.mp4"
      ></video>

      <video
        ref="video1_2"
        class="w-full h-full object-cover"
        :class="{ hidden: item1VideoFlag !== 2 }"
        muted
        @play="video1Playing = true"
        @ended="video1Playing = false"
        src="@/views/product/reno14-pro/image/4/videos-photogtaphy-c1-1-pc.mp4"
      ></video>

      <div class="absolute bottom-[4%] w-full flex justify-center">
        <div
          class="bg-white rounded-full px-[0.875rem] h-[1.875rem] overflow-hidden text-xs text-black"
        >
          <div class="grid grid-rows-[1.875rem] items-center" ref="video1Desc">
            <p class="">1.0X</p>
            <p class="">3.5X</p>
          </div>
        </div>
      </div>
    </VideoWrap>
  </div>
</template>
